<template>
  <div class="my">
    <!-- 个人资料 -->
    <div class="user">
      <div class="title">
        <div class="u-l">
          <div class="name">{{ userInfo.nickname }}</div>
          <div class="intro">{{ userInfo.intro }}</div>
        </div>
        <img
          class="u-r"
          :src="userInfo.avatar"
          alt=""
          @click="$router.push('/info')"
        />
      </div>
      <ul class="question">
        <li class="item">
          <div class="num">{{ userInfo.submitNum }}</div>
          <div class="mine">累计答题</div>
        </li>
        <li class="item">
          <div class="num">{{ userInfo.collectQuestions.length }}</div>
          <div class="mine">收藏题目</div>
        </li>
        <li class="item">
          <div class="num">{{ userInfo.errorNum }}</div>
          <div class="mine">我的错题</div>
        </li>
        <li class="item">
          <div class="num">
            {{
              (
                ((userInfo.submitNum - userInfo.errorNum) /
                  userInfo.submitNum) *
                100
              ).toFixed(0) + '%'
            }}
          </div>
          <div class="mine">正确率</div>
        </li>
      </ul>
      <van-cell
        :value="userInfo.position"
        title="我的岗位"
        is-link
        class="position"
      >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #icon>
          <i class="iconfont iconicon_mine_gangwei myicon"></i>
        </template>
      </van-cell>
    </div>
    <!-- 其他资料 -->
    <div class="other">
      <div class="head">
        <div class="t1">面经数据</div>
        <ul class="t2">
          <li class="item">
            <div class="yesterday">
              昨日阅读<span class="add"
                >+{{ userInfo.shareData.read.yesterday }}</span
              >
            </div>
            <div class="total">{{ userInfo.shareData.read.total }}</div>
            <div class="red">阅读总数</div>
          </li>
          <li class="item">
            <div class="yesterday">
              昨日获赞<span class="add"
                >+{{ userInfo.shareData.star.yesterday }}</span
              >
            </div>
            <div class="total">{{ userInfo.shareData.star.total }}</div>
            <div class="red">获赞总数</div>
          </li>
          <li class="item">
            <div class="yesterday">
              昨日新增<span class="add">{{
                userInfo.shareData.comment.yesterday
              }}</span>
            </div>
            <div class="total">{{ userInfo.shareData.comment.total }}</div>
            <div class="red">评论总数</div>
          </li>
        </ul>
      </div>
      <div class="body">
        <van-cell value="21" title="我的面经分享" is-link class="position">
          <template #icon>
            <i class="iconfont iconicon_mine_mianjing myicon"></i>
          </template>
        </van-cell>
        <van-cell value="98" title="我的消息" is-link class="position">
          <template #icon>
            <i class="iconfont iconicon_mine_xiaoxi myicon"></i>
          </template>
        </van-cell>
        <van-cell value="32" title="收藏的题库" is-link class="position">
          <template #icon>
            <i class="iconfont iconicon_mine_tikushoucang myicon"></i>
          </template>
        </van-cell>
        <van-cell value="32" title="收藏的企业" is-link class="position">
          <template #icon>
            <i class="iconfont iconicon_mine_tikushoucang myicon"></i>
          </template>
        </van-cell>
        <van-cell value="123" title="我的错题" is-link class="position">
          <template #icon>
            <i class="iconfont  iconicon_mine_cuoti myicon"></i>
          </template>
        </van-cell>
        <van-cell value="166" title="收藏的面试经验" is-link class="position">
          <template #icon>
            <i class="iconfont iconbtn_shoucang_sel myiconi"></i>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  }
}
</script>

<style lang="less">
.my {
  font-size: 12px;
  .user {
    background-color: #c1002d;
    color: #fff;
    height: 216px;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 30px 30px 0 15px;
      .u-l {
        .name {
          font-size: 22px;
          margin-bottom: 10px;
        }
        .intro {
          color: #999;
        }
      }
      .u-r {
        width: 50px;
        height: 50px;
        border: 5px solid #ccc;
        box-sizing: border-box;
        border-radius: 50%;
      }
    }
    .question {
      display: flex;
      text-align: center;
      margin-top: 26px;
      .item {
        flex: 1;
        .num {
          font-size: 22px;
          margin-bottom: 10px;
        }
        .mine {
          color: #999;
        }
      }
    }
    .position {
      padding: 15px;
      width: 92%;
      margin: 20px auto 0;
      border-radius: 10px 10px 0 0;
    }
  }
  .other {
    margin-top: 20px;
    .head {
      padding: 15px;
      .t1 {
        font-size: 20px;
        margin-bottom: 20px;
        font-weight: 700;
      }
      .t2 {
        display: flex;
        text-align: center;
        .item {
          flex: 1;
          .yesterday {
            color: #ccc;
            .add {
              color: #00b8d4;
            }
          }
          .total {
            font-size: 22px;
            margin: 12px 0;
          }
        }
      }
    }
    .body {
      padding: 0 15px;
      .position {
        padding: 15px;
      }
    }
  }
  .myicon {
    margin-right: 10px;
    font-size: 18px;
  }
}
</style>
